<script setup name="History">
import {Message} from '@element-plus/icons-vue'
import ImportEmailAddressee from './components/ImportEmailAddressee.vue'
import ImportEmailItemList from '@/views/email/item/index'

import {nextTick} from 'vue'
import getSearchConfig from './config/searchConfig'
import getContentConfig from './config/contentConfig.js'
import getDialogConfig from './config/dialogConfig.js'
import useDialog from '@/hooks/useDialog'
import getComputedConfig from '@/hooks/getPageConfig'
import {emailBaseUrl} from '@/api/config/base.js'
import {sendEmailByImportHistoryIds} from "@/api/email/history";


const {proxy} = getCurrentInstance();
const {sys_email_status} = proxy.useDict('sys_email_status')

const pageName = 'import/history'
const idKey = 'mailImportHistoryId'
const requestBaseUrl = emailBaseUrl
const pageSearchRef = ref(null)
const pageContentRef = ref(null)
const descConfig = ref({})
const dialogHideItems = ref([])
const tableHideItems = ref([])

// 列表头部按钮
const headerButtons = ['refresh', 'delete', 'columnDisplay', 'comSearch']

const dictMap = {}

const searchConfig = getSearchConfig()
const searchConfigComputed = computed(() => {
  return getComputedConfig(searchConfig, dictMap)
})
const tableSelected = ref([])
const tableListener = {
  selectionChange: (selected) => {
    tableSelected.value = selected
  },
}
const contentConfig = getContentConfig()
const contentConfigComputed = computed(() => {
  contentConfig.hideItems = tableHideItems
  return contentConfig
})

const dialogConfig = getDialogConfig()

const dialogConfigComputed = computed(() => {
  dialogConfig.hideItems = dialogHideItems
  return getComputedConfig(dialogConfig, dictMap)
})

const addCallBack = () => {
  dialogHideItems.value.length = 0
}
const editCallBack = (item, type, res) => {
  isEditMore.value = type
}
const isEditMore = ref(false)
const editMoreClick = () => {
  if (tableSelected.value.length > 0) {
    const data = tableSelected.value[0]
    pageContentRef.value?.editClick(data, true)
    nextTick(() => {
      const newArray = tableSelected.value.slice(1)
      dialogRef.value?.changeSelected(newArray)
    })
  }
}

const editNext = (data) => {
  pageContentRef.value?.editClick(data, true)
}

const [dialogRef, infoInit, addClick, editBtnClick] = useDialog(
    addCallBack,
    editCallBack,
    '添加'
)

const dialogWidth = ref('1200px')
const searchData = computed(() => {
  return pageContentRef.value?.finalSearchData
})

const search = () => {
  pageSearchRef.value?.search()
}

const beforeSend = (queryInfo) => {
}

const permission = ref({})

const onChangeShowColumn = (filterArr) => {
  tableHideItems.value = filterArr
}

/** 导入按钮操作 */
const viewDialog = ref(false)
const handleImport = () => {
  viewDialog.value = true
}

/** 发送邮件按钮操作 */
const sendLoading = ref(false)
const handleSendEmail = () => {
  if (tableSelected.value.length > 0) {
    const data = tableSelected.value
    const ids = data.map(item => item[idKey])
    proxy.$modal.confirm('是否确认发送邮件?').then(() => {
      sendLoading.value = true
      sendEmailByImportHistoryIds(ids).then((res) => {
        const {msg, code} = res
        if (code === 200) {
          console.log('发送成功')
          sendLoading.value = false
          proxy.$modal.notifySuccess('发送成功')
        } else {
          sendLoading.value = false
          proxy.$modal.notifyError(msg)
        }
      })
      proxy.$modal.notifySuccess('正在发送，请稍后查看邮件')
    }).catch(() => {
    }).finally(() => {
    })
  } else {
    proxy.$modal.notifyWarning('请选择要发送邮件的导入记录')
  }
}

/** 查看明细记录按钮操作 */
const viewItemDialog = ref(false)
const mailImportHistoryId = ref(null)
const handleEmailItemListView = (data) => {
  mailImportHistoryId.value = data[idKey]
  viewItemDialog.value = true
}

const init = () => {
}

init()

const handleImportEmailAddresseeClose = () => {
  search()
}
</script>
<template>
  <div class="default-main page">
    <PageSearch
        ref="pageSearchRef"
        :pageName="pageName"
        :searchConfig="searchConfigComputed"
    ></PageSearch>
    <PageContent
        ref="pageContentRef"
        :pageName="pageName"
        :idKey="idKey"
        :contentConfig="contentConfigComputed"
        :descConfig="descConfig"
        :dictMap="dictMap"
        :tableListener="tableListener"
        :tableSelected="tableSelected"
        :permission="permission"
        :requestBaseUrl="requestBaseUrl"
        :headerButtons="headerButtons"
        :showEdit="false"
        @beforeSend="beforeSend"
        @addClick="addClick"
        @editBtnClick="editBtnClick"
        @onChangeShowColumn="onChangeShowColumn"
        @editMoreClick="editMoreClick"
    >
      <template #handleLeft>
        <el-button
            class="order17 ml12"
            type="primary"
            @click="handleImport"
        >
          <SvgIcon size="14" iconClass="upload"/>
          <span class="ml6">导入邮件</span>
        </el-button>
        <el-button
            class="order17 ml12"
            type="primary"
            @click="handleSendEmail"
        >
          <SvgIcon size="14" iconClass="guide"/>
          <span class="ml6">一键发信</span>
        </el-button>
      </template>
      <template #todoSlot="{ backData }">
        <el-button
            size="small"
            type="primary"
            @click="handleEmailItemListView(backData)"
        >
          <el-icon>
            <Message/>
          </el-icon>
          <span class="ml6">邮件明细</span>
        </el-button>
      </template>
    </PageContent>
    <PageDialog
        ref="dialogRef"
        :width="dialogWidth"
        :pageName="pageName"
        :idKey="idKey"
        :sendIdKey="idKey"
        :dialogConfig="dialogConfigComputed"
        :infoInit="infoInit"
        :search="search"
        :isEditMore="isEditMore"
        :requestBaseUrl="requestBaseUrl"
        @editNext="editNext"
    />
    <el-dialog
        :model-value="viewItemDialog"
        title="邮件导入明细"
        width="80%"
        destroy-on-close
        center
        append-to-body
        fullscreen
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
    >
      <ImportEmailItemList
          v-if="viewItemDialog"
          v-model:mailImportHistoryId="mailImportHistoryId"
          :tableHideItems="['code', 'fileName']"
          :showSearch="true"
          :showSend="true"
          :showPagination="false"
      ></ImportEmailItemList>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="viewItemDialog = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <ImportEmailAddressee v-model:dialogVisible="viewDialog"
                          @close="handleImportEmailAddresseeClose"></ImportEmailAddressee>
  </div>

</template>

<style scoped lang="scss">
.page {
  :deep(.statusClass .el-radio-group) {
    width: 100%;

    .el-radio {
      margin-right: 16px;
    }
  }

  :deep(.del) {
    margin-left: 12px;
  }
}
</style>
